import React from "./react";
import ReactDOM from "./react-dom";

class ClassComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 0,
        };
    }

    add = () => {
        this.setState({
            num: this.state.num + 1,
        });
    };

    render() {
        return (
            <div>
                <h1 style={this.props.style}>{this.state.num}</h1>
                <button onClick={this.add}>+</button>
            </div>
        );
    }
}

const rootElement = <ClassComponent name="aaaa" style={{ color: "red" }}></ClassComponent>;

ReactDOM.render(rootElement, document.getElementById("root"));

// 核心思想
// 1 setState时会把当前的更新放进Updater的paddingState
// 2 通过paddingState更新class组件的state
// 3 用新的state 用render产生新的vnode，再createDom产生新的真实dom
// 4 父组件replaceChild 把新dom替换旧dom

// 通过paddingState更新class组件的state
//  getState() {
//     let { paddingState, classInstance } = this;
//     let { state } = classInstance;
//     paddingState.forEach((newState) => {
//         state = { ...state, ...newState };
//     });
//     paddingState.length = 0;
//     return state;
// }

// 用新的state 用render产生新的vnode，再createDom产生新的真实dom
// forceUpdate() {
//     let newVnode = this.render();
//     let oldVnode = this.oldReaderVnode;
//     let oldDom = oldVnode.dom;
//     updateVnote(oldDom.parentNode, oldVnode, newVnode);
//     this.oldReaderVnode = newVnode;
// }

// 组件更新替换
// export function updateVnote(parentDom, oldVnode, newVnode) {
//     let newDom = createDom(newVnode);
//     let oldDom = oldVnode.dom;
//     parentDom.replaceChild(newDom, oldDom);
// }
